<template>
<div>
  <div class="rightLayout">
    <div class="layoutWrap" >
      <div class="layoutTop">
        <div class="layoutTopMain">
          <h2 class="layoutTitle"><span class="typeImg"></span><span class="typeName">图形设计器</span></h2>
          <a href="javascript:;" class="hideLayoutBtn" @click="hideLayout()"><i class="layoutCloseIcon"></i></a></div>
      </div>
      <div class="layoutMain">
        <component :is="currentView" transition="fade" transition-mode="out-in" keep-alive :keyMap="keyMap" :parentDesignerData='parentDesignerData' @graphsSave='dialogGraphsSave'></component>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import designer from './designer.vue'
import chartLoader from 'common/graph/chartLoader'
export default {
  name: 'designPanel',
  props: {
    parentDesignerData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      keyMap: {editable:'true'},
      currentView: designer,
      desigerData:{}
    }
  },
  mounted() {
    this.desigerData = this.parentDesignerData;
  },
  methods: {
    hideLayout(){
      $(".rightLayout").animate({
        left: "100%"
      }).removeClass("showBlock");
      $(".layoutTop").animate({
        left: "100%"
      });
      $(".layoutWrap").show();
      $("body").removeClass("hideScoll");
      chartLoader.clearAllTimer();
    },
    dialogGraphsSave(){
      //广播一次保存成功事件
      this.$emit('graphsSave', {});
    }
  },
  components: {
    designer
  }
}
</script>
